<template>
  <div class="g-nav">
    <div class="warp">
      <ul class="nav">
        <li>
          <a href="javascript:;" class="z-slt"><em>推荐</em></a>
          <a href="javascript:;"><em>排行榜</em></a>
          <a href="javascript:;"
            ><em class="f-pr">歌单<span class="f-white"></span></em
          ></a>
          <a href="javascript:;"><em>主播电台</em></a>

          <a href="javascript:;"><em>歌手</em></a>
          <a href="javascript:;"><em>新碟上架</em></a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "HomePageNav",
  setup() {},
};
</script>

<style scoped lang="less">
.g-nav {
  height: 35px;
  z-index: 90;
  box-sizing: border-box;
  background-color: #c20c0c;
  border-bottom: 1px solid #a40011;
}
.warp {
  width: 1100px;
  height: 34px;
  margin: 0 auto;
}
.nav {
  float: left;
  padding-left: 180px;
  li {
    float: left;
    height: 34px;
    text-align: center;
    a {
      color: #fff;
    }
  }
  .z-slt {
    text-decoration: none;
    em {
      background: #9b0909;
    }
  }
  em {
    display: inline-block;
    height: 20px;

    padding: 0 13px;
    margin: 7px 17px 0;
    border-radius: 20px;
    line-height: 21px;
    &:hover {
      background: #9b0909;
    }
  }
  .f-pr {
    position: relative;
    zoom: 1;
    padding: 0 15px 0 11px;
  }
}

.f-white {
  position: absolute;
  display: inline-block;
  width: 8px;
  height: 8px;
  top: 2px;
  background: url(../../common/images/white-r-icon@3x.png);
  background-size: cover;
}
</style>
